<template>
  <div class="add-class">
      <div class="text-class">授课班级:</div>
      <div class="chioce-class">{{this.addr}}</div>
      <router-link to="/class" tag="div" class="add-bt">选择</router-link>   
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'homeclass',
  computed: {
      ...mapState(['addr'])
  },
}
</script>

<style scoped>
    .add-class{
        height: 1rem;
        line-height: 1rem;
        background:#eeee;
        border-radius: .08rem;
    }
    .text-class{
        position: relative;
        left: .46rem;
        float: left;
        line-height: 1rem;
        font-size: .36rem;
        font:bolder;
    }
    .chioce-class{
        position: relative;
        float: left;
        left: 1rem;
        font-size: .36rem;
        color:rgb(64, 71, 172)
    }
    .add-bt{
        position: relative;
        right: .1rem;
        top: .1rem;
        height: .8rem;
        line-height: .8rem;
        float: right;
        width: 1.2rem;      
        text-align: center;
        font-size: .36rem;
        border-radius: .1rem;
        background: rgb(93, 145, 204);
        color:aliceblue;
    }
   
</style>